<template>
    <section class="ex-field">
        <w-button :disabled="disabled" v-if="!waitingCode" @click="getCode"  size="normal" type="primary" class="right-button">
            获取验证码
        </w-button>
        <w-button v-if="waitingCode" class="right-button waiting-button" size="normal" type="primary" :disabled="!disabled">
            {{ remainSeconds }}s重新获取
        </w-button>
    </section>
</template>
<script>
import codeIcon from '../assets/img/code-icon.png'

export default {
    name: 'code-field',
    props: ['label', 'placeholder', 'disabled', 'value', 'maxLength'],
    data() {
        return {
            codeIcon,
            currentValue: '',
            remainSeconds: 60,
            waitingCode: false
        }
    },
    mounted() { },
    watch: {
        value() {
            this.currentValue = this.value
        },
        currentValue(val) {
            this.$emit('input', this.currentValue)
        }
    },
    methods: {
        getCode() {
            this.$emit('fetch');
            //this.waitingCode = true;
            //this.countDown()
            //this.$refs['code-input'].focus()
        },
        countDown() {
            this.waitingCode = true;
            this.remainSeconds -= 1

            if (this.remainSeconds < 0 || this.remainSeconds === 0) {
                this.waitingCode = false
                this.remainSeconds = 60
            } else {
                setTimeout(this.countDown.bind(this), 1000)
            }
        }
    }
}
</script>
<style lang='scss'>
@import '../assets/css/keyboard/variables.scss';

/*@import './ex-field.scss';*/
.ex-field {
    .right-button {
        width: 100px;
        &.waiting-button {
            background: $tipsFontColor;
            color: #ffffff;
            width: 110px;
            label {
                justify-content: center;
            }
        }
    }
}
</style>